<template>
  <div class="sty-nav">
    <el-menu :uniqueOpened="true" background-color="#272727" active-text-color="#ffd04b" text-color="#fff"
      class="el-menu-vertical-trader" :collapse-transition="false" router :default-active="activePath">
      <el-menu-item index="/Ahome/anewindex">
        <home-two theme="multi-color" size="20" :fill="['#ffffff', '#f5f5f5', '#313131', '#313131']" :strokeWidth="2" />
        <span style="margin-left:8px">新闻首页</span>
      </el-menu-item>
      <el-menu-item index="/Ahome/newcolumn">
        <layers theme="multi-color" size="20" :fill="['#fff', '#fff', '#fff', '#fff']" :strokeWidth="2" />
        <span style="margin-left:8px">栏目管理</span>
      </el-menu-item>
      <el-sub-menu index="3">
        <template #title>
          <all-application theme="multi-color" size="20" :fill="['#fff', '#fff', '#fff', '#fff']" :strokeWidth="2" />
          <span style="margin-left:8px">新闻管理</span>
        </template>
        <el-sub-menu index="3-1">
          <template #title>审核列表</template>
          <el-menu-item index="/Ahome/reviewed">已审核</el-menu-item>
          <el-menu-item index="/Ahome/unapproved">未审核</el-menu-item>
        </el-sub-menu>
        <el-menu-item index="/Ahome/newlist">新闻列表</el-menu-item>
      </el-sub-menu>
      <el-menu-item index="/Ahome/auserinfo">
        <avatar theme="multi-color" size="20" :fill="['#ffffff', '#f5f5f5', '#313131', '#313131']" :strokeWidth="2" />
        <span style="margin-left:8px">个人信息</span>
      </el-menu-item>
    </el-menu>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { onBeforeRouteUpdate, useRoute } from 'vue-router';

import { Layers, HomeTwo, AllApplication,Send,Avatar } from '@icon-park/vue-next'

const route = useRoute()
const activePath = ref('')

onBeforeRouteUpdate((to) => {
  activePath.value = to.path
})


onMounted(() => {
  // activePath.value = route.matched[1].path

})

</script>

<style scoped>
.sty-nav {
  display: flex;
  flex-direction: column;
}

.el-menu-vertical-trader {
  flex: 1;
  border: 0 !important;
}
</style>